<template>
  <div>
		<van-nav-bar  title="立即评价" left-arrow @click-left="$utils.back($route.path)" />
		<div class="order-item bg-white pd-24 mg-24" v-if="info.DetailList  && info.DetailList.length > 0">
			<div class="bg-white " v-for="(item,index) in info.DetailList" :key="index">
				<div class="service_item mb-24 br-8">
					<div>
						<img-box class="is-160 classImg br-16" :img-url="item.ProductImage" />
					</div>
					<div class="service ml-24">
						<div class="service_name">{{ item.Name }}</div>
						<div class="color-gray7">服务技师：{{ info.ArtificerName }}</div>				
					</div>
				</div>
			</div>
			<div class="tac">
				<van-rate v-model="requestData.star" @change="onChange" size="28" color="#24c373" />
			</div>
		</div>
	
		<div class="bg-white pd-24 mg-24 br-8">
      <p class="fs-28">我的评价:</p>
      <van-field v-model="requestData.content" type="textarea" class=" fs-28 mt-15 remark" placeholder="请在输入您的建议，它对我们很重要，谢谢~~" />
    </div>
		<van-button v-if="requestData.content != '' && requestData.star >= 1" class="release" @click="submit">发布</van-button>
		<van-button v-else class="unrelease" >发布</van-button>
	</div>
</template>
<script>
import imgBox from 'components/imgBox'
import { AddBookHomeOrderComment } from 'api/physio'
export default {
	components:{
		imgBox
	},
	props:{	},
	data(){
		return{
			info:{},
			requestData:{
				star: 0,
				content: '',
			},
		}
	},
	created(){
		this.info = this.$route.query.item
		this.requestData.orderId = this.info.OrderId
	},
	methods:{	
		onChange(){
			
		},
		submit(){
			AddBookHomeOrderComment(this.requestData).then(res => {
				if(res){
					this.$toast("评价成功")
					this.$router.push('/physioMyOrder')
				}
			})
		}
	}	
}
</script>
<style lang="scss" scoped>
	.service_item{
		display: flex;
	}
	.service_name{
		font-size: 32px;
		color: $black2;
		margin-bottom: 12px;
	}
	.service{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.remark{
		background: #f7f7f7;
	}
	.unrelease{
		width: 690px;
		height: 90px;
		background: $physio-primary1;
		opacity: 0.5;
		border-radius: 45px;
		color: #fff;
		margin: 54px 24px 0 36px;
		text-align: center;
		font-size: 32px;
	}

	.release{
		width: 690px;
		height: 90px;
		background: $physio-primary1;
		border-radius: 45px;
		color: #fff;
		margin: 54px 24px 0 36px;
		text-align: center;
		font-size: 32px;
	}

	
	.classImg{
		width: 224px;
		height: 180px;
	}
</style>
